console.log('我被触发了__1')
/* //plane封装成类
//实例化后使用
//plane方法有:
    // cteate 
    config
    start
    stop
    pause
    
    
    */
    function create(dom) {
        let canvas = document.createElement('canvas');
        dom.appendChild(canvas);
        canvas.width = 480;
        canvas.height = 650;

        // 初始化画布对象
        // const canvas = document.getElementById("canvas");
        const context = canvas.getContext("2d");

        // 定义游戏的状态
        // 开始
        const START = 0;
        // 开始时
        const STARTING = 1;
        // 运行时
        const RUNNING = 2;
        // 暂停时
        const PAUSE = 3;
        // 结束时
        const END = 4;

        //创建一个配置文件 收藏所有的图片路径
        const IMAGES = {
            b: "img/bullet1.png",
            bg: "img/4.jpg",
            copyright: "img/shoot_copyright.png",
            pause: "img/game_pause.png",
            loading_frame: ["img/game_loading1.png", "img/game_loading2.png", "img/game_loading3.png",
                "img/game_loading4.png"
            ],
            hero_frame_live: ["img/hero1.png", "img/hero2.png"],
            hero_frame_death: ["img/hero_blowup_n1.png", "img/hero_blowup_n2.png", "img/hero_blowup_n3.png",
                "img/hero_blowup_n4.png"
            ],
            e1_live: ["img/enemy1.png"],
            e1_death: ["img/enemy1_down1.png", "img/enemy1_down2.png", "img/enemy1_down3.png", "img/enemy1_down4.png"],
            e2_live: ["img/enemy2.png"],
            e2_death: ["img/enemy2_down1.png", "img/enemy2_down2.png", "img/enemy2_down3.png", "img/enemy2_down4.png"],
            e3_live: ["img/enemy3_n1.png", "img/enemy3_n2.png"],
            e3_death: ["img/enemy3_down1.png", "img/enemy3_down2.png", "img/enemy3_down3.png", "img/enemy3_down4.png",
                "img/enemy3_down5.png", "img/enemy3_down6.png"
            ],
            c1: "img/lanqiu.jpg"
        };
        //初始化各个图片
        const b = createImage(IMAGES.b);
        const bg = createImage(IMAGES.bg);
        const copyright = createImage(IMAGES.copyright);
        const pause = createImage(IMAGES.pause);
        const loading_frame = createImage(IMAGES.loading_frame);
        const hero_frame = {
            live: createImage(IMAGES.hero_frame_live),
            death: createImage(IMAGES.hero_frame_death),
        };
        const e1 = {
            live: createImage(IMAGES.e1_live),
            death: createImage(IMAGES.e1_death),
        };
        const e2 = {
            live: createImage(IMAGES.e2_live),
            death: createImage(IMAGES.e2_death),
        };
        const e3 = {
            live: createImage(IMAGES.e3_live),
            death: createImage(IMAGES.e3_death),
        };
        const c1 = createImage(IMAGES.c1);

        function createImage(src) {
            let img;
            if (typeof src === "string") {
                img = new Image();
                img.src = src;
            } else {
                img = [];
                for (let i = 0; i < src.length; i++) {
                    img[i] = new Image();
                    img[i].src = src[i];
                }
            }
            return img;
        }

        //天空类的配置项
        const SKY = {
            bg: bg,
            width: 480,
            height: 650,
            speed: 10,
        };

        // 飞机加载界面的配置项
        const LOADING = {
            frame: loading_frame,
            width: 186,
            height: 38,
            x: 0,
            y: 650 - 38,
            speed: 400,
        };

        // 英雄配置项
        const HERO = {
            frame: hero_frame,
            width: 99,
            height: 124,
            speed: 100,
        };

        // 子弹配置项
        const BULLET = {
            img: b,
            width: 9,
            height: 21,
        };

        //小敌机配置项
        const E1 = {
            type: 1,
            width: 57,
            height: 51,
            life: 10,
            score: 1,
            frame: e1,
            minSpeed: 20,
            maxSpeed: 10
        };
        //中敌机配置项
        const E2 = {
            type: 2,
            width: 69,
            height: 95,
            life: 50,
            score: 5,
            frame: e2,
            minSpeed: 50,
            maxSpeed: 20
        };
        //打敌机配置项
        const E3 = {
            type: 3,
            width: 169,
            height: 258,
            life: 100,
            score: 20,
            frame: e3,
            minSpeed: 100,
            maxSpeed: 100
        };
        //奖励类配置项
        const C1 = {
            type: 4,
            width: 75,
            height: 75,
            life: 1,
            score: 1,
            img: c1,
            minSpeed: 5,
            maxSpeed: 10
        };

        //初始化一个天空类
        class Sky {
            constructor(config) {
                this.bg = config.bg;
                this.width = config.width;
                this.height = config.height;
                this.x1 = 0;
                this.y1 = 0;
                this.x2 = 0;
                this.y2 = -this.height;
                this.speed = config.speed;
                this.lastTime = new Date().getTime();
            }
            judge() {
                let currentTime = new Date().getTime();
                if (currentTime - this.lastTime > this.speed) {
                    this.y1++;
                    this.y2++;
                    this.lastTime = currentTime;
                }
                if (this.y2 === 0) {
                    this.y1 = 0;
                    this.y2 = -this.height;
                }
            }
            paint(context) {
                context.drawImage(this.bg, this.x1, this.y1, this.width, this.height);
                context.drawImage(this.bg, this.x2, this.y2, this.width, this.height);
            }
        }

        // 初始化一个飞机界面加载类
        class Loading {
            constructor(config) {
                this.frame = config.frame;
                this.frameIndex = 0;
                this.width = config.width;
                this.height = config.height;
                this.x = config.x;
                this.y = config.y;
                this.speed = config.speed;
                this.lastTime = new Date().getTime();
            }
            judge() {
                const currentTime = new Date().getTime();
                if (currentTime - this.lastTime > this.speed) {
                    this.frameIndex++;
                    if (this.frameIndex === 4) {
                        state = RUNNING;
                    }
                    this.lastTime = currentTime;
                }
            }
            paint(context) {
                context.drawImage(this.frame[this.frameIndex], this.x, this.y);
            }
        }

        // 初始化一个英雄类
        class Hero {
            constructor(config) {
                this.width = config.width;
                this.height = config.height;
                this.x = (480 - config.width) / 2;
                this.y = 650 - config.height;
                this.frame = config.frame;
                this.frameLiveIndex = 0;
                this.frameDeathIndex = 0;
                this.lastTime = new Date().getTime();
                this.speed = config.speed;
                this.img = null;
                this.live = true;
                this.lastShootTime = new Date().getTime();
                this.shootInterval = 50; //直接控制子弹刷新速率
                this.bulletList = [];
                this.destory = false;
            }
            judge() {
                const currentTime = new Date().getTime();
                if (currentTime - this.lastTime > this.speed) {
                    if (this.live) {
                        this.img = this.frame.live[this.frameLiveIndex++ % this.frame.live.length];
                    } else {
                        this.img = this.frame.death[this.frameDeathIndex++];
                        if (this.frameDeathIndex === this.frame.death.length) {
                            this.destory = true;
                        }
                    }
                    this.lastTime = currentTime;
                }
            }
            paint(context) {
                context.drawImage(this.img, this.x, this.y, this.width, this.height);
            }
            shoot() {
                const currentTime = new Date().getTime();
                if (currentTime - this.lastShootTime > this.shootInterval) {
                    let bullet = new Bullet(BULLET, this.x + this.width / 2 - BULLET.width / 2, this.y - BULLET.height);
                    this.bulletList.push(bullet);
                    bullet.paint(context);
                    this.lastShootTime = currentTime;
                }
            }
            collide() {
                this.live = false;
            }
        }

        //初始化一个子弹类
        class Bullet {
            constructor(config, x, y) {
                this.img = config.img;
                this.width = config.width;
                this.height = config.height;
                this.x = x;
                this.y = y;
                this.destory = false;
            }
            paint(context) {
                context.drawImage(this.img, this.x, this.y);
            }
            move() {
                this.y -= 8;
            }
            outOfBounds() {
                return this.y < -this.height;
            }
            collide() {
                this.destory = true;
            }
        }

        // 初始化一个敌机类
        class Enemy {
            constructor(config) {
                this.type = config.type;
                this.width = config.width;
                this.height = config.height;
                this.x = Math.floor(Math.random() * (480 - config.width));
                this.y = -config.height;
                this.life = config.life;
                this.score = config.score;
                this.frame = config.frame;
                this.img = this.frame.live[0];
                this.live = true;
                this.speed = Math.floor(Math.random() * (config.minSpeed - config.maxSpeed + 1)) + config.maxSpeed;
                this.lastTime = new Date().getTime();
                this.deathIndex = 0;
                this.destory = false;
            }
            move() {
                const currentTime = new Date().getTime();
                if (currentTime - this.lastTime >= this.speed) {
                    if (this.live) {
                        this.img = this.frame.live[0];
                        this.y++;
                        this.lastTime = currentTime;
                    } else {
                        this.img = this.frame.death[this.deathIndex++];
                        if (this.deathIndex === this.frame.death.length) {
                            this.destory = true;
                        }
                    }
                }
            }
            paint(context) {
                context.drawImage(this.img, this.x, this.y);
            }
            outOfBounds() {
                if (this.y > 650) {
                    return true;
                }
            }
            hit(o) {
                let ol = o.x;
                let or = o.x + o.width;
                let ot = o.y;
                let ob = o.y + o.height;
                let el = this.x;
                let er = this.x + this.width;
                let et = this.y;
                let eb = this.y + this.height;
                if (ol > er || or < el || ot > eb || ob < et) {
                    return false;
                } else {
                    return true;
                }
            }
            collide() {
                this.life--;
                if (this.life === 0) {
                    this.live = false;
                    score += this.score;
                }
            }
        }
        //初始化奖励类
        class award {
            constructor(config) {
                this.type = config.type;
                this.width = config.width;
                this.height = config.height;
                this.x = Math.floor(Math.random() * (480 - config.width));
                this.y = -config.height;
                this.life = config.life;
                this.score = config.score;
                this.img = config.img;
                this.live = true;
                this.speed = Math.floor(Math.random() * (config.minSpeed - config.maxSpeed + 1)) + config.maxSpeed;
                this.lastTime = new Date().getTime();
                this.deathIndex = 0;
                this.destory = false;
            }
            move() {
                const currentTime = new Date().getTime();
                if (currentTime - this.lastTime >= this.speed) {
                    if (this.live) {
                        this.y = this.y + 6;
                        this.lastTime = currentTime;
                    } else {
                        this.destory = true;

                    }
                }
            }
            paint(context) {
                context.drawImage(this.img, this.x, this.y, this.width, this.height);
            }
            outOfBounds() {
                if (this.y > 650) {
                    return true;
                }
            }
            hit(o) {
                let ol = o.x;
                let or = o.x + o.width;
                let ot = o.y;
                let ob = o.y + o.height;
                let el = this.x;
                let er = this.x + this.width;
                let et = this.y;
                let eb = this.y + this.height;
                if (ol > er || or < el || ot > eb || ob < et) {
                    return false;
                } else {
                    return true;
                }
            }
            // collide() {
            //   this.life--;
            //   if (this.life === 0) {
            //     this.live = false;
            //     score += this.score;
            //   }
            // }
        }
        //初始化一个天空实例
        const sky = new Sky(SKY);
        //初始化一个飞机界面加载实例
        const loading = new Loading(LOADING);
        //初始化一个英雄实例 英雄是会变的
        let hero = new Hero(HERO);
        //state表示游戏的状态 取值必须是以上的五种状态
        let state = START;
        //score 分数变量 life 变量
        let score = 0;
        let life = 3;
        //为canvas绑定一个点击事件 且他如果是START状态的时候需要修改成STARTING状态
        canvas.addEventListener("click", () => {
            if (state === START) {
                state = STARTING;
            }
        });
        // 为canvas绑定一个鼠标移动事件 鼠标正好在飞机图片的正中心
        canvas.addEventListener("mousemove", (e) => {
            let x = e.offsetX;
            let y = e.offsetY;
            hero.x = x - hero.width / 2;
            hero.y = y - hero.height / 2;
        });

        // //为canvas绑定一个屏幕触碰事件 触碰点正好在飞机图片的正中心
        // canvas.addEventListener("touchstart",(e)=>{
        //   let x = e.offsetX;
        //   let y = e.offsetY;
        //   hero.x = x - hero.width / 2;
        //   hero.y = y - hero.height / 2;
        // })
        //为canvas绑定一个屏幕移动触摸点事件 触碰点正好在飞机图片的正中心
        canvas.addEventListener("touchmove", (e) => {
            // let x = e.pageX;
            // let y = e.pageY;
            console.log(e);
            // let x = e.touches[0].clientX;
            // let y = e.touches[0].clinetY;
            let x = e.touches[0].pageX;
            let y = e.touches[0].pageY;
            // let x = e.touches[0].screenX;
            // let y = e.touches[0].screenY;
            let write1 = (document.body.clientWidth - 480) / 2;
            let write2 = (document.body.clientHeight - 650) / 2;
            hero.x = x - write1 - hero.width / 2;
            hero.y = y - write2 - hero.height / 2;

            // hero.x = x - hero.width / 2;
            // hero.y = y - hero.height / 2;
            console.log(x, y);
            console.log(document.body.clientWidth, document.body.clientHeight);
            e.preventDefault(); // 阻止屏幕滚动的默认行为

        })
        // 为canvas绑定一个鼠标离开事件 鼠标离开时 RUNNING -> PAUSE
        canvas.addEventListener("mouseleave", () => {
            if (state === RUNNING) {
                state = PAUSE;
            }
        });

        // 为canvas绑定一个鼠标进入事件 鼠标进入时 PAUSE => RUNNING
        canvas.addEventListener("mouseenter", () => {
            if (state === PAUSE) {
                state = RUNNING;
            }
        });
        // 碰撞检测函数
        //此处的碰撞检测包括 
        //1.子弹与敌机的碰撞
        //2.英雄与敌机的碰撞
        //3.英雄与随机奖励的碰撞
        function checkHit() {
            // 遍历所有的敌机
            for (let i = 0; i < awards.length; i++) {
                //检测英雄是否碰到奖励类
                if (awards[i].hit(hero)) {
                    //当然了,这个随机奖励的样式也要删了
                    awards.splice(i, 1);
                    //清除所有的敌机
                    // for (let i = 0; i < enemies.length; i++) {
                    //   enemies.splice(i, 1);
                    // }
                    enemies.length = 0;

                }
            }
            for (let i = 0; i < enemies.length; i++) {
                //检测英雄是否撞到敌机
                if (enemies[i].hit(hero)) {
                    //将敌机和英雄的destory属性改为true
                    enemies[i].collide();
                    hero.collide();
                }
                for (let j = 0; j < hero.bulletList.length; j++) {
                    enemies[i].hit(hero.bulletList[j]);
                    //检测子弹是否撞到敌机
                    if (enemies[i].hit(hero.bulletList[j])) {
                        //将敌机和子弹的destory属性改为true
                        enemies[i].collide();
                        hero.bulletList[j].collide();
                    }
                }
            }
        }
        //该变量中有所有的敌机实例
        let enemies = [];
        //该变量中存放所有的奖励实例
        let awards = [];
        //敌机产生的速率
        let ENEMY_CREATE_INTERVAL = 800;
        let ENEMY_LASTTIME = new Date().getTime();
        // 全局函数 隔一段时间就来初始化一架敌机/奖励
        function createComponent() {
            const currentTime = new Date().getTime();
            if (currentTime - ENEMY_LASTTIME >= ENEMY_CREATE_INTERVAL) {
                let ran = Math.floor(Math.random() * 100);
                if (ran < 55) {
                    enemies.push(new Enemy(E1));
                } else if (ran < 85 && ran > 55) {
                    enemies.push(new Enemy(E2));
                } else if (ran < 95 && ran > 85) {
                    enemies.push(new Enemy(E3));
                } else if (ran > 95) {
                    awards.push(new award(C1));

                }

                ENEMY_LASTTIME = currentTime;
            }
        }
        // 全局函数 来判断所有的子弹/敌人组件 "负责移动"
        function judgeComponent() {
            for (let i = 0; i < hero.bulletList.length; i++) {
                hero.bulletList[i].move();
            }
            for (let i = 0; i < enemies.length; i++) {
                enemies[i].move();
            }
            for (let i = 0; i < awards.length; i++) {
                awards[i].move();
            }
        }
        // 全局函数 来绘制所有的子弹/敌人组件 绘制score&life面板
        function paintComponent() {
            for (let i = 0; i < hero.bulletList.length; i++) {
                hero.bulletList[i].paint(context);
            }
            for (let i = 0; i < enemies.length; i++) {
                enemies[i].paint(context);
            }
            for (let i = 0; i < awards.length; i++) {
                awards[i].paint(context);
            }
            context.font = "20px 微软雅黑";
            context.fillStyle = "green";
            context.textAlign = "left";
            context.fillText("score: " + score, 10, 20);
            context.textAlign = "right";
            context.fillText("life: " + life, 480 - 10, 20);
            //重置样式
            context.fillStyle = "black";
            context.textAlign = "left";
        }
        // 全局函数 来销毁所有的子弹/敌人组件 销毁掉英雄
        function deleteComponent() {
            if (hero.destory) {
                life--;
                hero.destory = false;
                if (life === 0) {
                    state = END;
                } else {
                    hero = new Hero(HERO);
                }
            }
            for (let i = 0; i < hero.bulletList.length; i++) {
                if (hero.bulletList[i].outOfBounds() || hero.bulletList[i].destory) {
                    hero.bulletList.splice(i, 1);
                }
            }
            for (let i = 0; i < enemies.length; i++) {
                if (enemies[i].outOfBounds() || enemies[i].destory) {
                    enemies.splice(i, 1);
                }
            }
        }

        //当图片加载完毕时,需要做某些事情
        bg.addEventListener("load", () => {
            setInterval(() => {
                switch (state) {
                    case START:
                        sky.judge();
                        sky.paint(context);
                        let logo_x = (480 - copyright.naturalWidth) / 2;
                        let logo_y = (650 - copyright.naturalHeight) / 2;
                        context.drawImage(copyright, logo_x, logo_y);
                        break;
                    case STARTING:
                        sky.judge();
                        sky.paint(context);
                        loading.judge();
                        loading.paint(context);
                        break;
                    case RUNNING:
                        console.log("结束_1")

                        sky.judge();
                        sky.paint(context);
                        hero.judge();
                        hero.paint(context);
                        hero.shoot();
                        createComponent();
                        judgeComponent();
                        deleteComponent();
                        paintComponent();
                        checkHit();
                        break;
                    case PAUSE:
                        let pause_x = (480 - pause.naturalWidth) / 2;
                        let pause_y = (650 - pause.naturalHeight) / 2;
                        context.drawImage(pause, pause_x, pause_y);
                        break;
                    case END:
                        //给我的画笔设置一个字的样式
                        //后面写出来的字都是这个样式的
                        context.font = "bold 24px 微软雅黑";
                        context.textAlign = "center";
                        context.textBaseline = "middle";
                        context.fillText("GAME_OVER", 480 / 2, 650 / 2);
                        break;
                }
            }, 10);
        });
        /* console.log(bg)
            setInterval(() => {
                switch (state) {
                    case START:
                        sky.judge();
                        sky.paint(context);
                        let logo_x = (480 - copyright.naturalWidth) / 2;
                        let logo_y = (650 - copyright.naturalHeight) / 2;
                        context.drawImage(copyright, logo_x, logo_y);
                        break;
                    case STARTING:
                        sky.judge();
                        sky.paint(context);
                        loading.judge();
                        loading.paint(context);
                        break;
                    case RUNNING:
                        console.log("结束_1")

                        sky.judge();
                        sky.paint(context);
                        hero.judge();
                        hero.paint(context);
                        hero.shoot();
                        createComponent();
                        judgeComponent();
                        deleteComponent();
                        paintComponent();
                        checkHit();
                        break;
                    case PAUSE:
                        let pause_x = (480 - pause.naturalWidth) / 2;
                        let pause_y = (650 - pause.naturalHeight) / 2;
                        context.drawImage(pause, pause_x, pause_y);
                        break;
                    case END:
                        //给我的画笔设置一个字的样式
                        //后面写出来的字都是这个样式的
                        context.font = "bold 24px 微软雅黑";
                        context.textAlign = "center";
                        context.textBaseline = "middle";
                        context.fillText("GAME_OVER", 480 / 2, 650 / 2);
                        break;
                }
            }, 10); */


        console.log("结束_2")
        //背景切换方法
        function changebg() {
            console.log("changebg方法被触发")
            bg.src = "img/background.png"
        }

    };

export default create;